<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>保质期计算器</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-form label-position="top" label-width="80px">
        <el-form-item label="生产日期">
            <el-date-picker v-model="date" type="date" placeholder="选择生产日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="保质期(天)">
            <el-input-number v-model="num" :min="1" label="保质期"></el-input-number>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="compute()">计算</el-button>
        </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div>
        <el-descriptions :column="1">
            <el-descriptions-item label="今天">
                <span>{{getFormatToday()}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="保质期剩余" v-if="result.days > 0">
                <span>{{result.days}}天</span>
            </el-descriptions-item>
            <el-descriptions-item label="到期日期" v-if="result.days > 0">
                <span>{{result.date}}</span>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</div>
</body>
<script>
    new Vue({
        el     : '#app',
        data   : function () {
            return {
                date: '',
                num : 30,
                result:{
                    days:0,
                    date:'',
                    months:0,
                    format:'',
                },
            }
        },
        watch: {
            date: function (val) {
                this.compute()
            },
            num: function (val) {
                this.compute()
            }
        },
        methods: {
            compute(){
                if(!this.date){
                    this.$message.error('请选择生产日期')
                    return
                }

                if(!this.num || this.num < 1){
                    this.$message.error('请输入保质期')
                    return
                }

                let date = new Date(this.date)
                let days = date.getTime() + this.num * 24 * 60 * 60 * 1000
                let result = new Date(days)
                // 剩余
                this.result.days = Math.floor((days - new Date().getTime()) / (24 * 60 * 60 * 1000))
                // 到期日期
                this.result.date = result.getFullYear() + '-' + (result.getMonth() + 1) + '-' + result.getDate()
                // 剩余月份
                this.result.months = Math.floor((days - new Date().getTime()) / (24 * 60 * 60 * 1000) / 30)
                // 剩余 x年x月x天 （不足一年不显示年， 不足一月不显示月）
                this.result.format = this.result.months > 12 ? Math.floor(this.result.months / 12) + '年' + this.result.months % 12 + '月' + this.result.days + '天' : this.result.months + '月' + this.result.days + '天'
            },
            getFormatToday(){
                let date = new Date()
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
            }
        }
    })
</script>
</html>
